<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class="iconfont icon-fenleisousuo"></span>
        <p>分类</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class="iconfont icon-gouwuches"></span>
        <p>购物车</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-xiaolian"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

<style lang="scss">
@import '@/lib/reset.scss';
.footer {
  @include rect(100%, 0.5rem);
  @include background-color(#fff);
  ul {
    @include rect(100%, 100%);
    @include flexbox();
    li {
      @include flex(); // flex: 1;
      @include rect(auto, 100%);
      // 水平垂直居中
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();

      &.router-link-exact-active,
      .router-link-active {
        @include color(#ff734c);
      }

      span {
        @include font-size(22px);
      }
      p {
        @include font-size(12px);
      }
    }
  }
}
</style>
